<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 11-12 -->
    <h1>布局</h1>

    <div class="header">
        <h1>Shanghai</h1>
    </div>

    <div class="clearfix">
        <div class="column menu">
            <ul>
                <li>The Flight</li>
                <li>The City</li>
                <li>The Island</li>
                <li>The Food</li>
            </ul>
        </div>

        <div class="column content">
            <h1>The City</h1>
            <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome
                to Shanghai!
            </p>
            <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
        </div>
    </div>

    <div class="footer">
        <p>Footer Text</p>
    </div>

    <p>
        <span>T</span>his is some text.
        This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>
    <p>用浮动创建一个网站 <a href="https://www.w3school.com.cn/css/css_float_examples.asp"></a> </p>
    <h1>inline-block</h1>
    <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#clients">Our Clients</a></li>
        <li><a href="#contact">Contact Us</a></li>
    </ul>

    <h1>对齐</h1>

    <div class="center">
        <p>Hello World!</p>
    </div>
    <img src="../images/绿草茵茵.jpg" alt="" width="250px" height="250px" id="picture">

    <p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：</p>

    <div class="clearfix">
        <img class="img2" src="../images/绿草茵茵.jpg" alt="W3School" width="180" height="167">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
    </div>
    <div class="center2">
        <p>我是垂直居中的。</p>
    </div>
    <div class="center3">
        <p>我是垂直和水平居中。</p>
    </div>
    <div class="center4">
        <p>我是垂直和水平居中。</p>
    </div>


</body>

</html>